<template>
  <div class="index">
    <div class="banner-box">
      <UiHeader class="ui-header" />
      <div class="banner-index swiper" id="j-banner-index">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <video ref="videoRef1" autoplay muted src="https://qiniudown.chenxi618.com/kalaqia/knowledge-space/AE%E5%90%88%E6%88%902.mp4"></video>
          </div>
          <div class="swiper-slide">
            <video
              ref="videoRef2"
              autoplay
              muted
              src="https://qiniudown.chenxi618.com/kalaqia/knowledge-space/1920X818AE%E5%AD%97%E5%B9%95.mp4"></video>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="bg-top">
      <div class="ui-center">
        <div class="title-line ui-flex align-center justify-center">知识空间</div>
        <div class="title-box ui-flex align-center justify-between">
          <div class="icon icon-1"></div>
          <a href="./listSpace?active=0" class="more"></a>
        </div>
        <div class="red-box ui-flex" ref="animateRef1">
          <div class="left">
            <Transition
              enter-active-class="animate__animated animate__fadeInLeft animate__slow"
              leave-active-class="animate__animated animate__fadeOutLeft animate__slow">
              <img v-show="animate1" src="../../assets/mock/1.png" alt="" />
            </Transition>
          </div>
          <div class="right">
            <Transition
              enter-active-class="animate__animated animate__fadeInDown animate__slow"
              leave-active-class="animate__animated animate__fadeOutUp">
              <div
                v-show="animate1"
                :class="['item', { on: redIndex === 0 }]"
                @mouseover="ChangeRedIndex(0)"
                @click="Jump('/listSpaceList?categoryId=1')">
                <div class="title">
                  <i class="arrow"></i>
                  <span>祖国辽阔疆域</span>
                  <i class="arrow down"></i>
                </div>
              </div>
            </Transition>
            <Transition
              enter-active-class="animate__animated animate__fadeInUp animate__slow"
              leave-active-class="animate__animated animate__fadeOutDown animate__slow">
              <div
                v-show="animate1"
                :class="['item item-2', { on: redIndex === 1 }]"
                @mouseover="ChangeRedIndex(1)"
                @click="Jump('/listSpaceList?categoryId=2')">
                <div class="title">
                  <i class="arrow"></i>
                  <span>中华悠久历史</span>
                  <i class="arrow down"></i>
                </div>
              </div>
            </Transition>
            <Transition
              enter-active-class="animate__animated animate__fadeInDown animate__slow"
              leave-active-class="animate__animated animate__fadeOutUp animate__slow">
              <div
                v-show="animate1"
                :class="['item item-3', { on: redIndex === 2 }]"
                @mouseover="ChangeRedIndex(2)"
                @click="Jump('/listSpaceList?categoryId=3')">
                <div class="title">
                  <i class="arrow"></i>
                  <span>民族灿烂文化</span>
                  <i class="arrow down"></i>
                </div>
              </div>
            </Transition>
            <Transition
              enter-active-class="animate__animated animate__fadeInUp animate__slow"
              leave-active-class="animate__animated animate__fadeOutDown animate__slow">
              <div
                v-show="animate1"
                :class="['item item-4', { on: redIndex === 3 }]"
                @mouseover="ChangeRedIndex(3)"
                @click="Jump('/listSpaceList?categoryId=4')">
                <div class="title">
                  <i class="arrow"></i>
                  <span>人民伟大精神</span>
                  <i class="arrow down"></i>
                </div>
              </div>
            </Transition>
          </div>
        </div>
        <div class="intro-box ui-flex">
          <div class="left flex-1">
            <div class="list ui-flex justify-end">
              <div
                v-for="item in natureList"
                :key="item.subjectId"
                :class="['item', { on: currentNature.subjectId === item.subjectId }]"
                @click="ChangeNature(item)">
                {{ item.title }}
              </div>
            </div>
            <div class="title-text">民族文化走廊介绍</div>
            <div class="info-text">
              所谓民族走廊，是指一定的民族或族群长期沿着一定的自然环境如河流或山脉向外迁徙或流动的路线。在这条走廊中必然保留着该民族或族群众多的历史与文化的沉淀。费孝通提出中国三大民族走廊包括南岭走廊、藏彝走廊、河西走廊，是中华民族多元一体格局理论的重要组成部分。费老理论从现当代民族分布而论，与地理分界基本吻合;地理特征是经济发展的基础，从而直接影响了民族族群的形成和发展。目前民族走廊研究包括藏彝走廊、河西走廊、云贵走廊、南岭走廊、武陵走廊、辽西走廊等走廊地带的研究
            </div>
            <a href="./listSpace?active=1" class="more"></a>
          </div>
          <div class="right" ref="animateRef2">
            <Transition
              enter-active-class="animate__animated animate__fadeInDown animate__slow"
              leave-active-class="animate__animated animate__fadeOutUp animate__slow">
              <div v-show="animate2" class="img-box" @click="Jump('/listSpaceList?subjectId=' + currentNature.subjectId + '&type=1')">
                <img :src="currentNature.url" alt="" />
              </div>
            </Transition>
          </div>
        </div>
      </div>
    </div>
    <div class="ui-center">
      <div class="title-line ui-flex align-center justify-center">课程案例</div>
      <div class="teach-box" ref="animateRef3">
        <Transition
          enter-active-class="animate__animated animate__fadeInUp"
          leave-active-class="animate__animated animate__fadeOutDown animate__slower">
          <div v-show="animate3" class="item">
            <div class="title ui-flex align-center justify-between">
              <div class="name">语文</div>
              <div class="more"></div>
            </div>
            <img src="../../assets/mock/3.png" alt="" class="banner" />
            <div class="list">
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
            </div>
          </div>
        </Transition>
        <Transition
          enter-active-class="animate__animated animate__fadeInUp animate__slow"
          leave-active-class="animate__animated animate__fadeOutDown animate__slow">
          <div v-show="animate3" class="item">
            <div class="title ui-flex align-center justify-between">
              <div class="name">历史</div>
              <div class="more"></div>
            </div>
            <img src="../../assets/mock/4.png" alt="" class="banner" />
            <div class="list">
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
            </div>
          </div>
        </Transition>
        <Transition
          enter-active-class="animate__animated animate__fadeInUp animate__slower"
          leave-active-class="animate__animated animate__fadeOutDown">
          <div v-show="animate3" class="item">
            <div class="title ui-flex align-center justify-between">
              <div class="name">道德与法治</div>
              <div class="more"></div>
            </div>
            <img src="../../assets/mock/5.png" alt="" class="banner" />
            <div class="list">
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
              <div class="news">
                <div class="name ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                <div class="date">03-28</div>
              </div>
            </div>
          </div>
        </Transition>
      </div>
    </div>
    <div class="bg-bottom">
      <div class="ui-center">
        <div class="title-line ui-flex align-center justify-center">扎根学校</div>
        <div class="map-box" ref="animateRef4">
          <Transition
            enter-active-class="animate__animated animate__fadeInUp animate__slow"
            leave-active-class="animate__animated animate__fadeOutDown animate__slow">
            <div v-show="animate4" class="ui-flex">
              <div class="left">
                <div class="title-box ui-flex align-center justify-between">
                  <div class="icon icon-2"></div>
                  <!-- <div class="more text">更多+</div> -->
                </div>
                <img src="../../assets/mock/8.png" alt="" />
              </div>
              <div class="right news-box">
                <div class="title-box ui-flex align-center justify-between">
                  <div class="icon icon-3"></div>
                  <a href="./listSchoolAndNews" class="more text">更多+</a>
                </div>
                <div class="list">
                  <div class="banner-news-2 swiper" id="j-banner-news">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <img src="../../assets/mock/banner-7.jpg" alt="" />
                      </div>
                      <div class="swiper-slide">
                        <img src="../../assets/mock/banner-1.png" alt="" />
                      </div>
                      <div class="swiper-slide">
                        <img src="../../assets/mock/banner-2.png" alt="" />
                      </div>
                      <div class="swiper-slide">
                        <img src="../../assets/mock/banner-3.png" alt="" />
                      </div>
                      <div class="swiper-slide">
                        <img src="../../assets/mock/banner-4.png" alt="" />
                      </div>
                    </div>
                  </div>
                  <a href="" class="item">
                    <div class="title ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                    <div class="date">03-28</div>
                  </a>
                  <a href="" class="item">
                    <div class="title ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                    <div class="date">03-28</div>
                  </a>
                  <a href="" class="item">
                    <div class="title ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                    <div class="date">03-28</div>
                  </a>
                  <a href="" class="item">
                    <div class="title ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                    <div class="date">03-28</div>
                  </a>
                  <a href="" class="item">
                    <div class="title ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                    <div class="date">03-28</div>
                  </a>
                  <a href="" class="item">
                    <div class="title ui-oneline">中心在贵州省思南县、德江县举行“扎根学校”签约暨授牌仪式</div>
                    <div class="date">03-28</div>
                  </a>
                </div>
              </div>
            </div>
          </Transition>
        </div>
        <div class="news-box" ref="animateRef5">
          <Transition
            enter-active-class="animate__animated animate__fadeInUp animate__slow"
            leave-active-class="animate__animated animate__fadeOutDown animate__slow">
            <div v-show="animate5" class="title-box ui-flex align-center justify-between">
              <i class="title"></i>
              <a href="http://epc.swu.edu.cn/sys/gztd.htm" class="more"></a>
            </div>
          </Transition>
          <Transition
            enter-active-class="animate__animated animate__slideInUp animate__slow"
            leave-active-class="animate__animated animate__fadeOutDown animate__slow">
            <div v-show="animate5" class="news ui-flex align-center">
              <div class="banner-news-box">
                <div class="banner-news swiper" id="j-banner-news-2">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img src="../../assets/mock/banner-4.png" alt="" />
                    </div>
                    <div class="swiper-slide">
                      <img src="../../assets/mock/banner-1.png" alt="" />
                    </div>
                    <div class="swiper-slide">
                      <img src="../../assets/mock/banner-2.png" alt="" />
                    </div>
                    <div class="swiper-slide">
                      <img src="../../assets/mock/banner-3.png" alt="" />
                    </div>
                  </div>
                  <div class="swiper-pagination"></div>
                </div>
              </div>
              <div class="edu-list">
                <div class="edu-title">平台简介</div>
                <div class="text">
                  西南民族教育与心理研究中心于 2021
                  年启动了“中华民族共同体意识教育实验室”建设项目。中华民族共同体意识教育实验室的基本定位，是以铸牢中华民族共同体意识为主线，以实验空间、知识空间为支撑、开展基础性、前瞻性实验研究的平台。
                </div>
                <div class="text">
                  目前，团队正在开发、设计“中华民族共同体意识”教育指标体系；构建以“中华民族共同体意识”为核心内容的知识库（数据库）、搭建实验平台，开展“中华民族共同体意识教育”的专题实验。
                </div>
              </div>
            </div>
          </Transition>
        </div>
      </div>
    </div>
    <UiFooter />
  </div>
</template>

<script setup>
import Swiper from 'swiper';
import { Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'animate.css';

import img1 from '../../assets/mock/map-4.png';
import img2 from '../../assets/mock/map-2.png';
import img3 from '../../assets/mock/map-3.png';

const { get, router } = inject('global');

let swiperVideo;
const InitSwiper = () => {
  swiperVideo = new Swiper('#j-banner-index', {
    modules: [Pagination],
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
    on: {
      afterInit: () => {
        // swiper视频播完后切换下一个
        for (let i = 0; i < document.getElementsByTagName('video').length; i++) {
          document.getElementsByTagName('video')[i].addEventListener('ended', () => {
            swiperVideo.slideNext();
          });
        }
      },
      slideChangeTransitionEnd: swiper => {
        document.getElementsByTagName('video')[swiper.activeIndex].play();
      }
    }
  });
};

let swiperNews;
const InitSwiperNews = () => {
  swiperNews = new Swiper('#j-banner-news', {
    modules: [Autoplay],
    loop: true,
    autoplay: true
  });
};

let swiperNews2;
const InitSwiperNews2 = () => {
  swiperNews2 = new Swiper('#j-banner-news-2', {
    modules: [Pagination, Autoplay],
    loop: true,
    autoplay: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    }
  });
};

let redIndex = ref(0);
const ChangeRedIndex = index => {
  redIndex.value = index;
};

let animate1 = ref(false),
  animateRef1 = ref(),
  animate2 = ref(false),
  animateRef2 = ref(),
  animate3 = ref(false),
  animateRef3 = ref(),
  animate4 = ref(false),
  animateRef4 = ref(),
  animate5 = ref(false),
  animateRef5 = ref();
const InitAnimate = () => {
  window.addEventListener('scroll', CheckVisibility);
  window.addEventListener('resize', CheckVisibility);
};
const RemoveAnimate = () => {
  window.removeEventListener('scroll', CheckVisibility);
  window.removeEventListener('resize', CheckVisibility);
};
const CheckVisibility = () => {
  CalcIsVisible(animate1, animateRef1);
  CalcIsVisible(animate2, animateRef2);
  CalcIsVisible(animate3, animateRef3);
  CalcIsVisible(animate4, animateRef4);
  CalcIsVisible(animate5, animateRef5);
};
const CalcIsVisible = (flag, ref) => {
  let rect = ref.value.getBoundingClientRect();
  const viewHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
  flag.value = rect.bottom - rect.height / 2 < viewHeight;
};

let lessonList = ref([]);
const GetLessonList = () => {
  get('/course').then(res => {});
};

let natureList = ref([
    {
      url: img1,
      title: '藏彝走廊',
      subjectId: 1
    },
    {
      url: img2,
      title: '河西走廊',
      subjectId: 2
    },
    {
      url: img3,
      title: '南岭走廊',
      subjectId: 3
    }
  ]),
  currentNature = reactive({});
const ChangeNature = data => {
  currentNature = Object.assign(currentNature, data);
};

const Jump = url => {
  router.push(url);
};

onMounted(() => {
  InitSwiper();
  InitSwiperNews();
  InitSwiperNews2();
  InitAnimate();
  ChangeNature(natureList.value[0]);
  // GetLessonList();
});

onUnmounted(() => {
  RemoveAnimate();
});
</script>

<style lang="scss" scoped>
.index {
  background-color: #ede8e2;
  .banner-box {
    position: relative;
    .ui-header {
      position: absolute;
      top: 0;
      z-index: 2;
      width: 100%;
    }
    .banner-index {
      width: 100%;
      height: 100vh;
      --swiper-pagination-bottom: 40px;
      img,
      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-color: #000;
      }
      :deep() .swiper-pagination-bullet {
        width: 36px;
        height: 36px;
        margin: 0 12px;
        @include bgImg('../../assets/banner-pagination.png');
        background-color: transparent;
        opacity: 1;
        &.swiper-pagination-bullet-active {
          @include bgImg('../../assets/banner-pagination_on.png');
        }
      }
    }
  }
  .bg-top {
    @include bgImg('../../assets/index-bg-top.png');
    background-size: 100% 919px;
  }
  .bg-bottom {
    @include bgImg('../../assets/index-bg-bottom.png');
    background-size: 100% 1259px;
    background-position: center bottom;
  }
  .title-line {
    font-size: 18px;
    line-height: 26px;
    color: #373737;
    height: 120px;
    @include bgImg('../../assets/title-bg.png');
  }
  .title-box {
    padding-bottom: 30px;
    .icon {
      width: 270.5px;
      height: 111.5px;
      &.icon-1 {
        @include bgImg('../../assets/title-1.png');
      }
      &.icon-2 {
        @include bgImg('../../assets/title-2.png');
      }
      &.icon-3 {
        @include bgImg('../../assets/title-3.png');
        opacity: 0;
      }
    }
    .more {
      display: block;
      width: 144px;
      height: 72px;
      @include bgImg('../../assets/more.png');
    }
  }
  .red-box {
    .left {
      flex-shrink: 0;
      width: 595px;
      height: 400px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      flex: 1;
      min-width: 0;
      display: flex;
      .item {
        position: relative;
        min-width: 104px;
        height: 400px;
        @include bgImg('../../assets/mock/2.png');
        background-position: center center;
        background-size: 100% 400px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0;
        justify-content: center;
        cursor: pointer;
        transition: all 0.5s linear;
        flex: 1;
        background-color: rgba(0, 0, 0, 0.5);
        &.item-2 {
          @include bgImg('../../assets/mock/9.png');
        }
        &.item-3 {
          @include bgImg('../../assets/mock/10.png');
        }
        &.item-4 {
          @include bgImg('../../assets/mock/11.png');
        }
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          display: block;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
        }
        &:hover,
        &.on {
          flex: 2;
          width: 267px;
          padding: 0 0 0 46px;
          justify-content: flex-start;
          &::before {
            display: none;
          }
        }
        .title {
          font-size: 18px;
          font-weight: bold;
          color: #ffffff;
          writing-mode: vertical-rl;
          display: flex;
          align-items: center;
          position: relative;
          .arrow {
            width: 40px;
            height: 22px;
            margin: 10px 0;
            @include bgImg('../../assets/banner-bg.png');
            &.down {
              transform: rotate(180deg);
            }
          }
          span {
            position: relative;
          }
        }
      }
    }
  }
  .intro-box {
    padding: 40px 0 30px 0;
    .left {
      .list {
        position: relative;
        padding: 0 5px 0 0;
        height: 116px;
        .item {
          position: relative;
          width: 132px;
          font-size: 24px;
          color: rgba(156, 44, 41, 0.5);
          height: 48px;
          text-align: center;
          line-height: 48px;
          cursor: pointer;
          @include bgImg('../../assets/bg-intro.png');
          &:hover,
          &.on {
            color: #fff;
            @include bgImg('../../assets/bg-intro_on.jpg');
            &::after {
              content: '';
              width: 1px;
              height: 8px;
              position: absolute;
              top: 52px;
              left: 50%;
              transform: translate(0, -50%);
              background-color: #9c2c29;
            }
          }
        }
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          right: -45px;
          display: block;
          width: 464px;
          height: 66px;
          @include bgImg('../../assets/intro-line.png');
        }
      }
      .title-text {
        font-size: 24px;
        font-weight: 900;
        color: #3e3938;
        line-height: 34px;
        margin: -40px 0 10px 0;
      }
      .info-text {
        font-size: 14px;
        color: #000000;
        line-height: 42px;
        padding: 0 49px 0 0;
      }
      .more {
        display: block;
        width: 159px;
        height: 72px;
        margin: 90px 0 0 0;
        @include bgImg('../../assets/more.png');
      }
    }
    .right {
      position: relative;
      z-index: 2;
      width: 630px;
      height: 439px;
      .img-box {
        padding: 5px;
        background-color: #fff;
        border: 1px solid #9c2c29;
        box-sizing: border-box;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .teach-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    min-height: 539px;
    .item {
      padding: 20px 20px 12px;
      box-sizing: border-box;
      background: #d4cfc2;
      .title {
        padding: 0 0 20px 0;
        .name {
          display: flex;
          align-items: center;
          font-size: 24px;
          font-weight: bold;
          color: #373737;
          &::before {
            content: '';
            display: block;
            width: 22px;
            height: 40px;
            margin-right: 20px;
            @include bgImg('../../assets/banner-bg_brown.png');
          }
          &::after {
            content: '';
            display: block;
            width: 22px;
            height: 40px;
            margin-left: 20px;
            @include bgImg('../../assets/banner-bg_brown.png');
            transform: rotate(180deg);
          }
        }
        .more {
          display: block;
          width: 54.58px;
          height: 31.43px;
          @include bgImg('../../assets/more_s.png');
        }
      }
      .banner {
        width: 100%;
        height: 260px;
        margin-bottom: 20px;
        object-fit: cover;
      }
      .news {
        display: flex;
        align-items: center;
        padding-bottom: 8px;
        font-size: 14px;
        line-height: 24px;
        .name {
          flex: 1;
          width: 0;
          color: #34424f;
          padding-right: 20px;
        }
        .date {
          color: #9e9e9e;
        }
      }
    }
  }
  .map-box {
    min-height: 787px;
    .title-box {
      .more {
        display: block;
        width: auto;
        height: auto;
        font-size: 22px;
        color: #9c2c29;
        background: none;
      }
    }
    .left {
      width: 896px;
      img {
        width: 100%;
        height: 643px;
        object-fit: cover;
      }
    }
    .right {
      flex: 1;
      min-width: 0;
      padding: 0 0 0 30px;
      .banner-news-2 {
        flex: 1;
        height: 318px;
        margin-bottom: 10px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .list .item {
        border: none;
        margin-bottom: 10px;
      }
    }
  }
  .news-box {
    padding: 30px 0 55px 0;
    min-height: 582px;
    .title-box .title {
      width: 302px;
      height: 111.5px;
      @include bgImg('../../assets/title-4.png');
    }
    .news {
      height: 424px;
      padding: 49px 109px;
      box-sizing: border-box;
      @include bgImg('@/assets/index-bg-edu.png');
    }
    .banner-news-box {
      width: 602px;
      height: 346px;
      box-sizing: border-box;
      padding: 7px 6px;
      margin-right: 59px;
      @include bgImg('@/assets/bg-banner-news.png');
    }
    .banner-news {
      width: 590px;
      height: 331.88px;
      .swiper-slide {
        position: relative;
        border: 4px solid #cebeab;
        box-shadow: 10px 10px 20px 0px rgba(214, 198, 178, 0.5);
        box-sizing: border-box;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      :deep() .swiper-pagination-bullet {
        width: 36px;
        height: 36px;
        margin: 0 12px;
        @include bgImg('../../assets/banner-pagination.png');
        background-color: transparent;
        opacity: 1;
        &.swiper-pagination-bullet-active {
          @include bgImg('../../assets/banner-pagination_on.png');
        }
      }
    }
    .list {
      .item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        font-size: 14px;
        color: #34424f;
        border-bottom: 1px dashed #bfbfbf;
        margin-bottom: 20px;
        box-sizing: border-box;
        line-height: 18px;
        &:last-child {
          margin: 0;
        }
        &::before {
          content: '';
          display: block;
          width: 14px;
          height: 2px;
          background: #9c2c29;
          margin-right: 13px;
        }
        .title {
          width: 0;
          flex: 1;
          padding: 0 30px 0 0;
        }
        .date {
          font-size: 14px;
          color: #9e9e9e;
          padding: 0 20px;
        }
      }
    }
    .edu-list {
      flex: 1;
      .edu-title {
        line-height: 35px;
        font-size: 24px;
        color: #7c715f;
        display: flex;
        justify-content: center;
        padding: 22px 0 30px 0;
        &::before {
          content: '';
          display: block;
          width: 214.81px;
          height: 33px;
          margin-right: 20px;
          @include bgImg('@/assets/edu-title.png');
        }
        &::after {
          content: '';
          display: block;
          width: 214.81px;
          height: 33px;
          margin-left: 20px;
          transform: rotate(180deg);
          @include bgImg('@/assets/edu-title.png');
        }
      }
      .text {
        line-height: 32px;
        font-size: 18px;
        color: #34424f;
        padding: 0 0 30px 0;
        position: relative;
        &::before {
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          background: #d4c8b9;
          position: absolute;
          top: 13px;
          left: -18px;
        }
        &:last-child {
          padding: 0;
        }
      }
    }
  }
}
</style>
